<template>
	<view>
		<u-navbar title="AI创作" :autoBack="true" :placeholder="true">
			<view slot="right">
				<u--image :showLoading="true" mode="aspectFit" src="/static/home/share.png" width="40rpx" height="40rpx"
					@click="gonav"></u--image>
			</view>
		</u-navbar>
		<view class="content">
			<view class="head">
				<view class="head-left">
					· 画面描述
				</view>
				<view class="integral">
					<u--image :showLoading="true" src="/static/home/integral.png" width="34rpx"
						height="34rpx"></u--image>
					<text>{{ info.ai_score }} 积分</text>
				</view>
			</view>
			<view class="text">
				<u--textarea height="300rpx" border="none" v-model="value" placeholder="请输入您的描述词" count></u--textarea>
			</view>
			<view class="tab">
				<view :class="item.show == true?'active-tab':'tab-item'" v-for="(item,index) in List" :key="index"
					@click="pick(index)">
					<view v-if="item.show">
						<u--image :showLoading="true" src="/static/home/yes.png" width="30rpx"
							height="20rpx"></u--image>
					</view>
					<text>{{item.map}}张图 {{item.integral}}积分</text>
				</view>
			</view>
			<view class="btn">
				<u-button @click="godown" shape="circle" size="large" color="#000" type="primary" text="下一步"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				info: {},
				List: [{
						map: 1,
						integral: 10,
						show: true
					},
					{
						map: 4,
						integral: 30,
						show: false
					}
				]
			}
		},
		onShow() {
			console.log(1)
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				this.$Request({
					method: 'POST',
					url: '/user/getUserInfo'
				}).then(res => {
					if (res.data.code == 1) {
						this.info = res.data.data
					}
				})
			},
			godown() {
				if (this.value == '') {
					uni.showToast({
						title: '请输入您的描述词！',
						icon: 'none'
					})
					return
				}
				const obj = this.List.find(e => e.show === true)
				
				if (obj.integral > this.info.ai_score) {
					uni.showToast({
						title: '您的积分不足！',
						icon: 'none'
					})
					return
				}
				uni.setStorageSync("imageInfo", {
					value: this.value,
					num: obj.map
				})
				uni.navigateTo({
					url: '/pages/index/second/index'
				})

			},
			pick(index) {
				this.List.map(item => {
					item.show = false
				})
				this.List[index].show = true
			},
			gonav() {
				uni.navigateTo({
					url: '/pages/my/works/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;

		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.head-left {
				font-size: 30rpx;
				font-weight: 700;
			}

			.integral {
				display: flex;
				align-items: center;
				background-color: #333;
				font-size: 24rpx;
				color: #ffe600;
				padding: 5rpx 15rpx;
				border-radius: 20rpx;
			}
		}

		.text {
			padding: 20rpx;
			background-color: #f5f6fa;
			border-radius: 30rpx;
			margin-top: 30rpx;
		}

		.tab {
			margin-top: 30rpx;
			text-align: center;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;

			text {
				margin-left: 10rpx;
			}

			.tab-item {
				width: 45%;
				background-color: #f5f6fa;
				border-radius: 40rpx;
				padding: 20rpx;
				color: #000;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.active-tab {
				width: 45%;
				background-color: #333;
				border-radius: 40rpx;
				padding: 20rpx;
				color: #ffe600;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.btn {
			margin-top: 50rpx;
		}
	}
</style>